<template>
<div class="topiclist-root">
  <div class="wrapper innerscr">
    <div class="topicblock" v-for="data in list">
      <div class="head">
        <div class="title">{{data.title}}</div>
        <div class="numtext">共<span class="num">{{data.total}}</span>条记录</div>    
      </div>
      <div class="list">
        <div v-for="item in data.data" class="listItem">
          <router-link to="detail" class="title" tag="div">{{item.title}}<img src="./img/fire.png" v-if="item.hot" class="hot"></router-link>
          <div class="cline">
            <div class="content">{{item.content}}</div>
            <div class="date">{{item.date}}</div>
          </div>
        </div>
      </div>
      <router-link class="more" to="/topic">更多...</router-link>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'topiclist',
  data(){
    return {
      list: []
    }
  },
  mounted(){
    fetch('/static/topiclist.json').then(r=>r.json()).then(data=>{
      this.list = data
    })
  }
}
</script>

<style scoped lang="stylus">
.topiclist-root
  padding 16px 20px
  box-sizing border-box
  >.wrapper
    overflow-y auto
    height 100%
    mask-image linear-gradient(#000 85%, transparent)

.topicblock
  clear both
  margin-bottom 20px
  overflow hidden
  >.head
    display flex
    justify-content space-between
    align-items flex-end
    margin-bottom 24px
    >.title
      font-size 24px
    >.numtext
      font-size 12px
      padding-right 28px
      >.num
        color #d40909
  >.list
    overflow auto
    margin-bottom 5px
  >.more
    font-size 12px
    float right
    padding-right 28px
    color #59b3ff
    text-decoration none

.listItem
  margin-bottom 5px
  >.title
    font-size 16px
    color #59b3ff
    margin-bottom 6px
    cursor pointer
    >.hot
      height 14px
      margin-left 12px
      vertical-align -1px
  >.cline
    display flex
    justify-content space-between
    white-space nowrap
    font-size 12px
    >.content
      overflow hidden
      text-overflow ellipsis
      width 365px
    >.date
      font-family consolas
      color #8dccfd
      letter-spacing 1px
      padding-right 24px
</style>